{% extends "templates/main_template.html.j2" %}

{% import "macros/user_name.html.j2" as USER_NAME %}
{% import "macros/issues_table.html.j2" as ISSUES_TABLE %}
{% import "macros/date_range_picker.html.j2" as DATE_RANGE_PICKER %}

{% block title -%}
  {{ USER_NAME.VALUE(target_user) }} · Статистика · Farado
{%- endblock %}

{% set issues_in_progress = statistics_helper.issues_in_progress() %}
{% set modified_issues = statistics_helper.modified_issues() %}
{% set modified_projects = statistics_helper.modified_projects() %}
{% set modified_versions = statistics_helper.modified_versions() %}

{% set active_menu = 'users' %}
{% set tab_menu = [
  ['Общее', 'general'],
  ['Запросы [' + modified_issues|length|string + ']', 'changed_issues'],
  ['Проекты [' + modified_projects|length|string + ']', 'projects'],
  ['Версии [' + modified_versions|length|string + ']', 'versions'],
  ['Отчёт', 'report'],
] %}
{# TODO: добавить вкладку ['Комментарии', 'comments'] #}


{#----------------------------------------------------------------------------#}
{% block styles %}
  {{ ISSUES_TABLE.STYLES() }}
  {{ DATE_RANGE_PICKER.STYLES() }}
  <link href="/static/css/page-toolbar.css" rel="stylesheet" type="text/css" />
{% endblock %}


{#----------------------------------------------------------------------------#}
{% block breadcrumb %}
  <ol class="breadcrumb">
    {# TODO: временное решение, нужно разделить редактор профиля и статистику #}
    {# Ссылка на редактор пользователя #}
      {% if restriction.is_admin %}
        <li class="breadcrumb-item">
          <a href="/users/user/{{ target_user.id }}">Редактор</a>
        </li>
      {% endif %}
    {# /Ссылка на редактор пользователя #}

    <li class="breadcrumb-item active" aria-current="page">
      {{ USER_NAME.VALUE(target_user) }} — статистика
    </li>
  </ol>
{% endblock %}


{#----------------------------------------------------------------------------#}
{# Таб 1 — Общее #}
{% block tab_content_1 %}
  {# Активные запросы #}
    <div class="row mt-3">
      <div class="col-12 mb-3">
        <h5>Активные запросы [{{ issues_in_progress|length }}]</h5>
      </div>

      <div class="col-12">
        <ul class="list-group">
          {% for issue in issues_in_progress %}
            {% set issue_kind = project_manager.issue_kind(issue.issue_kind_id) %}
            {% set workflow = project_manager.workflow(issue_kind.workflow_id) %}
            {% set parent_issue = project_manager.issue(issue.parent_id) %}
            <li class="list-group-item">
              <div class="d-flex w-100 justify-content-between">
                <div class="mb-1">

                  {# Наименование родительского запроса #}
                    <p class="mb-1">
                      {% if parent_issue %}
                        <a href="/issues/issue/{{ parent_issue.id }}"
                            class="parent-title link"
                            title="{{ parent_issue.caption|e }}">
                          #{{ parent_issue.id }}: {{ parent_issue.caption|e }}
                        </a>
                      {% else %}
                        <span class="parent-title link">
                          (Запрос верхнего уровня)
                        </span>
                      {% endif %}
                    </p>
                  {# /Наименование родительского запроса #}

                  {# Наименование целевого запроса #}
                    <a href="/issues/issue/{{ issue.id }}"
                        title="{{ issue.caption|e }}">
                      <i class="bi bi-card-heading"></i>
                      {{ workflow.caption|e }}: {{ issue_kind.caption|e }}
                      #{{ issue.id }}: {{ issue.caption|e }}
                    </a>
                  {# /Наименование целевого запроса #}

                </div>
              </div>

              {# Прогресс запроса #}
                <div class="col-12">
                  <div class="progress">
                    {% set progress = project_manager.progress_value(issue.id) %}
                    <div
                        class="progress-bar
                          {%- if 100 == progress %} bg-success
                          {%- elif 40 > progress %} bg-warning
                          {%- endif %}"
                        role="progressbar"
                        style="width: {{ progress }}%;"
                        aria-valuenow="{{ progress }}"
                        aria-valuemin="0"
                        aria-valuemax="100">{{ progress }}%</div>
                  </div>
                </div>
              {# /Прогресс запроса #}

              {# -- Перечень свойств запроса -- #}
                <div class="col-12">
                  <table class="table table-sm table-borderless">
                    <tbody>

                      {# Состояние запроса #}
                        {% set state = project_manager.state(issue.state_id) %}
                        {% if state %}
                          <tr>
                            <td style="width: 2%;">
                              Состояние:
                            </td>
                            <td>
                              {{ state.caption|e }}
                            </td>
                          </tr>
                        {% endif %}
                      {# /Состояние запроса #}

                      {# Проект #}
                        {% set project = project_manager.project(issue.project_id) %}
                        {% if project %}
                          <tr>
                            <td>
                              Проект:
                            </td>
                            <td>
                              <a href="/projects/project/{{ project.id }}">
                                {{ project.caption|e }}
                              </a>
                            </td>
                          </tr>
                        {% endif %}
                      {# /Проект #}

                      {# Версия #}
                        {% set version = project_manager.version(issue.version_id) %}
                        {% if version %}
                          <tr>
                            <td>
                              Версия:
                            </td>
                            <td>
                              <a href="/projects/version/{{ version.id }}">
                                {{ version.caption|e }}
                              </a>
                            </td>
                          </tr>
                        {% endif %}
                      {# /Версия #}

                      {# Изменён #}
                        {% set last_modify_user = project_manager.user(issue.last_modify_user_id()) %}
                        {% if last_modify_user %}
                          <tr>
                            <td>
                              Изменён:
                            </td>
                            <td>
                              {{- issue.last_modified() -}}
                              <a href="/users/user_statistics/{{ last_modify_user.id }}">
                                {{ USER_NAME.VALUE_WITH_ICON(last_modify_user, user.id) }}
                              </a>
                            </td>
                          </tr>
                        {% endif %}
                      {# /Изменён #}

                      {# Создан #}
                        {% set create_user = project_manager.user(issue.create_user_id()) %}
                        {% if create_user %}
                          <tr>
                            <td>
                              Создан:
                            </td>
                            <td>
                              {{- issue.created() -}}
                              <a href="/users/user_statistics/{{ create_user.id }}">
                                {{ USER_NAME.VALUE_WITH_ICON(create_user, user.id) }}
                              </a>
                            </td>
                          </tr>
                        {% endif %}
                      {# /Создан #}

                    </tbody>
                  </table>
                </div>
              {# -- /Перечень свойств запроса -- #}
            </li>
          {% endfor %}

          {% if not issues_in_progress %}
            <li class="list-group-item">
              Активных запросов не найдено.
            </li>
          {% endif %}
        </ul>
      </div>
    </div>
  {# /Активные запросы #}
{% endblock tab_content_1 %}


{#----------------------------------------------------------------------------#}
{# Таб 2 — Изменённые запросы #}
{% block tab_content_2 %}
  <div class="row mt-3">
    <div class="col-12 mb-3">
      <h5>Изменённые запросы за 7 дней</h5>
    </div>

    <div class="col-12">
      <ul class="list-group">
        {% for issue in modified_issues %}
          <li class="list-group-item">
            {% set issue_kind = project_manager.issue_kind(issue.issue_kind_id) %}
            {% set workflow = project_manager.workflow(issue_kind.workflow_id) %}
            {% set parent_issue = project_manager.issue(issue.parent_id) %}
            <div class="d-flex w-100 justify-content-between">
              <div class="mb-1">

                {# Наименование родительского запроса #}
                  <p class="mb-1">
                    {% if parent_issue %}
                      <a href="/issues/issue/{{ parent_issue.id }}"
                          class="parent-title link"
                          title="{{ parent_issue.caption|e }}">
                        #{{ parent_issue.id }}: {{ parent_issue.caption|e }}
                      </a>
                    {% else %}
                      <span class="parent-title link">
                        (Запрос верхнего уровня)
                      </span>
                    {% endif %}
                  </p>
                {# /Наименование родительского запроса #}

                {# Наименование целевого запроса #}
                  <a href="/issues/issue/{{ issue.id }}"
                      title="{{ issue.caption|e }}">
                    <i class="bi bi-card-heading"></i>
                    {{ workflow.caption|e }}: {{ issue_kind.caption|e }}
                    #{{ issue.id }}: {{ issue.caption|e }}
                  </a>
                {# /Наименование целевого запроса #}
              </div>

              {# Дата и время последнего изменения целевым пользователем #}
                <small>
                  {{ issue.last_modified_by_user(target_user.id) }}
                  <i class="bi bi-calendar-date"></i>
                </small>
              {# /Дата и время последнего изменения целевым пользователем #}

            </div>
          </li>
        {% endfor %}

        {% if not modified_issues %}
          <li class="list-group-item">
            Действий с запросами за посление 30 дней не найдено.
          </li>
        {% endif %}
      </ul>
    </div>
  </div>
{% endblock tab_content_2 %}


{#----------------------------------------------------------------------------#}
{# Таб 3 — Проекты #}
{% block tab_content_3 %}
  <div class="row mt-3">
    <div class="col-12 mb-3">
      <h5>Проекты изменённых запросов за 7 дней</h5>
    </div>

    <div class="col-12">
      <div class="list-group">
        {% for project in modified_projects %}
          <a href="/projects/project/{{ project.id }}"
              class="list-group-item list-group-item-action">
            <i class="bi bi-briefcase-fill"></i>
            {{ project.caption|e }}
          </a>
        {% endfor %}

        {% if not modified_projects %}
          <li class="list-group-item">
            Действий с запросами в рамках проектов за посление 30 дней не найдено.
          </li>
        {% endif %}
      </div>
    </div>
  </div>
{% endblock tab_content_3 %}


{#----------------------------------------------------------------------------#}
{# Таб 4 — Версии #}
{% block tab_content_4 %}
  <div class="row mt-3">
    <div class="col-12 mb-3">
      <h5>Версии изменённых запросов за 7 дней</h5>
    </div>

    <div class="col-12">
      <div class="list-group">
        {% for version in modified_versions %}
          {% set project = project_manager.project(version.project_id) %}
          <a href="/projects/version/{{ version.id }}"
              class="list-group-item list-group-item-action">
            <i class="bi bi-briefcase-fill"></i>
            {{ project.caption|e }}
            —
            <i class="bi bi-box-seam"></i>
            {{ version.caption|e }}
          </a>
        {% endfor %}

        {% if not modified_versions %}
          <li class="list-group-item">
            Действий с запросами в рамках версий за посление 30 дней не найдено.
          </li>
        {% endif %}
      </div>
    </div>
  </div>
{% endblock tab_content_4 %}


{#----------------------------------------------------------------------------#}
{# Таб 5 — Отчёт #}
{% block tab_content_5 %}
  <div class="row mt-2">
    <div class="col">
      <form
          id="report_form"
          action="/users/report/{{ target_user.id }}"
          method="post">
        {{ DATE_RANGE_PICKER.INPUT(
              from_date=from_date,
              to_date=to_date,
              id="daterange",
              name="daterange")
        }}
      </form>
    </div>
  </div>

  <br/>

  {% if report_data %}
    <div class="accordion" id="accordion_timeline_diagramm">
      <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
          <button
              class="accordion-button"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#collapseOne"
              aria-expanded="true"
              aria-controls="collapseOne">
            Временная шкала
          </button>
        </h2>
        <div
            id="collapseOne"
            class="accordion-collapse collapse show"
            aria-labelledby="headingOne"
            data-bs-parent="#accordion_timeline_diagramm">
          <div class="accordion-body">
            <div class="col">
              <div id="timeline_diagramm_div"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="table-container">
      <table
          class="table table-striped table-sm table-bordered table-hover"
          style="width:100%"
          id="report_table">
        <thead>
          <tr>
            <th scope="col">Проект</th>
            <th scope="col">Начало работ</th>
            <th scope="col">Окончание работ</th>
            <th scope="col">Тип запроса</th>
            <th scope="col">Состояние</th>
            <th scope="col">Сейчас</th>
            <th scope="col">Запрос</th>
            <th scope="col">Предок</th>
          </tr>
        </thead>
        <tbody>
          {% for item in report_data.container %}
            {% set issue = project_manager.issue(item.issue_id)%}
            {% set state = project_manager.state(item.state_id) %}

            {% if issue %}
              {% set actual_state = project_manager.state(issue.state_id) %}
              {% set issue_kind = project_manager.issue_kind(issue.issue_kind_id) %}
              {% set workflow = project_manager.workflow(issue_kind.workflow_id) %}
              {% set parent_issue = project_manager.issue(issue.parent_id) %}
              {% set project = project_manager.project(issue.project_id) %}

              <tr>
                <td>
                  {% if project %}
                    <a href="/projects/project/{{ project.id }}">
                      {{ project.caption|e }}
                    </a>
                  {% endif %}
                </td>
                <td style="white-space: nowrap;">{{ item.from_value() }}</td>
                <td style="white-space: nowrap;">{{ item.to_value() }}</td>
                <td>{{ workflow.caption|e }}: {{ issue_kind.caption|e }}</td>
                <td>{{ state.caption|e }}</td>
                <td>{{ actual_state.caption|e }}</td>
                <td>
                  <a href="/issues/issue/{{ issue.id }}"
                      title="{{ issue.caption|e }}">
                    #{{ issue.id }}: {{ issue.caption|e }}
                  </a>
                </td>
                <td>
                  {% if parent_issue %}
                    <a href="/issues/issue/{{ parent_issue.id }}"
                        title="{{ parent_issue.caption|e }}">
                      #{{ parent_issue.id }}: {{ parent_issue.caption|e }}
                    </a>
                  {% endif %}
                </td>
              </tr>
            {% endif %}
          {% endfor %}
        </tbody>
        <tfoot>
          <tr>
            <th>Проект</th>
            <th>Начало работ</th>
            <th>Окончание работ</th>
            <th>Тип запроса</th>
            <th>Состояние</th>
            <th>Сейчас</th>
            <th>Запрос</th>
            <th>Предок</th>
          </tr>
        </tfoot>
      </table>
    </div>

  {% endif %}
{% endblock tab_content_5 %}


{#----------------------------------------------------------------------------#}
{# Таб 6 — Комментарии #}
{% block tab_content_6 %}
  TODO
{% endblock tab_content_6 %}


{#----------------------------------------------------------------------------#}
{% block scripts %}
  {{ ISSUES_TABLE.SCRIPTS() }}
  {{ DATE_RANGE_PICKER.SCRIPTS() }}

  <script src="/static/js/apexcharts/apexcharts.min.js"></script>

  <script>
    document_ready_function = function() {
      {% if report_data %}
        $('#report_table').DataTable({
          "paging": false,
          "fixedColumns": true,
          "processing": true,
          "serverSide": false,
          "ordering": true,
          "order": [[ 1, "asc" ]],
          "autoWidth": false,
          "columnDefs": [
            { "width": "2%", "targets": 1 },
            { "width": "2%", "targets": 2 }
          ]
        });

        {%- set report_data_length = report_data.issues_ids()|length -%}
        {% if report_data_length %}
          var timeline_diagramm_options = {
            series: [
              {% set container_by_projects = report_data.container_by_projects() %}
              {% for project_id in container_by_projects.keys() %}
                {% set current_project = project_manager.project(project_id)%}
                {% set items = container_by_projects[project_id]%}
                {% if current_project %}
                  {
                    name: '{{ current_project.caption|e }}',
                    data: [
                      {% for item in items %}
                        {% set issue = project_manager.issue(item.issue_id) %}
                        {% set state = project_manager.state(item.state_id) %}
                        {
                          x: '#{{ issue.id }} {{ issue.caption|e }}',
                          y: [
                            new Date('{{ item.from_value() }}').getTime(),
                            new Date('{{ item.to_value() }}').getTime()
                          ]
                        }
                        {%- if not loop.last %},{% endif -%}
                      {% endfor %}
                    ]
                  }
                  {%- if not loop.last %},{% endif -%}
                {% endif %}
              {% endfor %}
            ],
            chart: {
              height:
                {%- if     5 > report_data_length -%}  200
                {%- elif  10 > report_data_length -%}  400
                {%- elif  20 > report_data_length -%}  500
                {%- elif  30 > report_data_length -%}  600
                {%- elif  40 > report_data_length -%}  800
                {%- elif  80 > report_data_length -%} 1000
                {%- elif 160 > report_data_length -%} 2000
                {%- elif 320 > report_data_length -%} 3000
                {%- elif 640 > report_data_length -%} 4000
                {%- else                          -%} 6000
                {%- endif -%},
              type: 'rangeBar'
            },
            plotOptions: {
              bar: {
                horizontal: true,
                barHeight: '90%',
                rangeBarGroupRows: true
              }
            },
            xaxis: {
              type: 'datetime',
              position: 'top',
              labels: {
                format: 'dd.MM.yyyy',
              }
            },
            yaxis: {
              labels: {
                align: 'left',
                minWidth: 0,
                maxWidth: 160
              }
            },
            legend: {
              position: 'right'
            },
            grid: {
              row: {
                colors: ['#f3f4f5', '#fff'],
                opacity: 1
              }
            },
            fill: {
              type: 'solid',
              opacity: 0.6
            }
          };

          var timeline_diagramm = new ApexCharts(
            document.querySelector("#timeline_diagramm_div"),
            timeline_diagramm_options
          );
          timeline_diagramm.render();
        {% endif %}

      {% endif %}

      {{ DATE_RANGE_PICKER.DOCUMENT_READY_SCRIPT(
            input_id="daterange",
            form_id="report_form")
      }}
    }
  </script>
{% endblock %}
